<template>
  <div class="categoryParam">
    <div>
      <el-alert
        title="注意：只允许为第三级分类设置相关参数"
        type="warning"
        show-icon
      >
      </el-alert>
    </div>

    <div class="cascader">
      <span>选择商品分类：</span>
      <el-cascader
        :options="options"
        v-model="selectLevel"
        :props="{
          label: 'cat_name',
          value: 'cat_id',
          children: 'children',
        }"
      ></el-cascader>
    </div>

    <div class="main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <main-params-list
            :btnName="DTname"
            v-if="activeName === 'many'"
          ></main-params-list>
        </el-tab-pane>

        <el-tab-pane label="静态参数" name="only">
          <main-params-list
            :btnName="JTname"
            v-if="activeName === 'only'"
          ></main-params-list>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getGoodCategory, getCateAttribute } from "@/api/goods";
import mainParamsList from "./childComponents/GoodParam/mainParamsList.vue";

export default {
  name: "categoryParam",
  data() {
    return {
      options: [
        {
          cat_name: "家电",
          cat_id: 0,
        },
      ],
      selectLevel: [],
      activeName: "many",
      DTname: "添加动态参数",
      JTname: "添加静态参数",
      tableDataMany: [],
      tableDataOnly: [],
    };
  },
  components: { mainParamsList },
  created() {
    this.$store.state.isAble = true; //每次进来都设置为true
    this.initGoodCategory();

    //刷新
    this.$bus.$on("delCateAttrSuccess", () => {
      this.initGetCateAttr(this.selectLevel, this.activeName, true);
    });
  },
  methods: {
    initGoodCategory() {
      getGoodCategory().then((res) => {
        this.options = res.data.data;
      });
    },
    initGetCateAttr(selectLevel, attr_sel, flag = false) {
      if (flag) {
        //判断是否存在数据了
        getCateAttribute(selectLevel[2]).then(
          (res) => {
            // console.log(res);
            if (res.data.data.onlyArr)
              this.tableDataOnly = res.data.data.onlyArr;
            this.tableDataMany = res.data.data.manyArr;
            // 更改vuex的数据
            if (attr_sel === "only")
              this.$store.state.tableData = this.tableDataOnly;
            else this.$store.state.tableData = this.tableDataMany;
          },
          (err) => {
            console.warn(err);
          }
        );
      } else {
        if (attr_sel === "only")
          this.$store.state.tableData = this.tableDataOnly;
        else this.$store.state.tableData = this.tableDataMany;
      }
    },
    // tab切换 发射数据
    handleClick() {
      this.initGetCateAttr(this.selectLevel, this.activeName);
    },
  },
  //监听变化 改变按键disabled、发射数据
  watch: {
    selectLevel(newValue, oldValue) {
      this.$store.state.isAble = newValue.length !== 3;
      this.initGetCateAttr(this.selectLevel, this.activeName, true);
      // 更改store的selectLevel(用于添加参数)
      this.$store.state.selectLevel = this.selectLevel;
    },
  },
};
</script>

<style  scoped>
.categoryParam {
  padding: 20px;
}
.cascader {
  margin: 15px 0 10px;
}
</style>
